<template>
  <div style="max-width: 1200px; width: 1200px; margin: 0 auto; height: 100vh">
    <span
      style="display: flex; justify-content: space-between; padding-top: 10px"
    >
      <router-link
        to="/main/renshi/kaoqing/churu"
        style="margin-bottom: 20px; display: inline-block"
        >返回</router-link
      >
      <router-link
        to="/main/renshi/kaoqing/churu"
        style="margin-bottom: 20px; display: inline-block"
        >新增登记</router-link
      >
    </span>
    <h2>员工临时出入登记列表</h2>
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        placeholder="姓名"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.employeeId"
        placeholder="工号"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-date-picker
        v-model="listQuery.date"
        type="date"
        placeholder="选择日期"
        style="width: 200px;"
        class="filter-item"
        value-format="yyyy-MM-dd"
      />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">
        新增
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="日期" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.date }}
        </template>
      </el-table-column>
      <el-table-column label="工号" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.employeeId }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="事由">
        <template slot-scope="scope">
          {{ scope.row.reason }}
        </template>
      </el-table-column>
      <el-table-column label="起始时间" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.startTime }}
        </template>
      </el-table-column>
      <el-table-column label="终止时间" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.endTime }}
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="scope">
          {{ scope.row.remark }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleView(row)">
            查看
          </el-button>
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />

    <!-- 详情对话框 -->
    <el-dialog title="出入登记详情" :visible.sync="dialogVisible" width="50%">
      <div v-if="detailData">
        <p><strong>日期：</strong>{{ formatDate(detailData.date) }}</p>
        <p><strong>工号：</strong>{{ detailData.employeeId }}</p>
        <p><strong>姓名：</strong>{{ detailData.name }}</p>
        <p><strong>事由：</strong>{{ detailData.reason }}</p>
        <p><strong>起始时间：</strong>{{ formatTime(detailData.startTime) }}</p>
        <p><strong>终止时间：</strong>{{ formatTime(detailData.endTime) }}</p>
        <p><strong>备注：</strong>{{ detailData.remark }}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDengjiEmployeeAccessList,
  getDengjiEmployeeAccessDetail,
  deleteDengjiEmployeeAccess,
} from "@/api/dengjiEmployeeAccess";
import Pagination from '@/components/Pagination'

export default {
  name: 'ChuruList',
  components: { Pagination },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        size: 10,
        name: undefined,
        employeeId: undefined,
        date: undefined
      },
      dialogVisible: false,
      detailData: null,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      getDengjiEmployeeAccessList(this.listQuery).then(response => {
        this.list = response.data.data.records;
        this.total = response.data.data.total;
        this.listLoading = false;
      });
    },
    handleFilter() {
      this.listQuery.current = 1;
      this.getList();
    },
    handleCreate() {
      this.$router.push('/main/renshi/kaoqing/churu');
    },
    handleView(row) {
      this.$router.push({
        path: '/main/renshi/kaoqing/churu',
        query: { id: row.id, type: 'view' }
      });
    },
    handleUpdate(row) {
      this.$router.push({
        path: '/main/renshi/kaoqing/churu',
        query: { id: row.id, type: 'edit' }
      });
    },
    handleDelete(row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDengjiEmployeeAccess(row.id).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getList();
        });
      });
    },
    formatDate(date) {
      if (!date) return "";
      return date.split("T")[0];
    },
    formatTime(time) {
      if (!time) return "";
      return time.substring(0, 5);
    },
  },
};
</script>

<style scoped>
::v-deep .el-input__inner {
  height: 30px !important;
  line-height: 30px !important;
}

.search-bar {
  margin-bottom: 20px;
}

.el-table {
  margin-top: 20px;
}

.el-pagination {
  margin-top: 20px;
  text-align: right;
}

::v-deep .el-button--primary {
  padding: 7px 15px !important;
}
</style>